<template>
	<div class="body-container-left">
		<div class="body-container-left-content">
			<div class="header-operate">
				<div class="info">
					<img class="img" src="https://avatars.githubusercontent.com/u/81468415?v=4" alt="" />
					<span class="name">朵拉w</span>
					<i class="logo">直播中</i>
				</div>
				<div class="operate">
					<el-button>订阅</el-button>
				</div>
			</div>
			<img src="@/assets/Group.png" class="audio" />
			<div class="footer">
				<span>DJSO杯 第三场：攻破堡垒战</span>
				<span class="footer-right"><img src="@/assets/eye-outline.png" alt="" /> 4534654</span>
			</div>
			<div class="tags">
				<span>#DJSO杯</span>
				<span>#游戏</span>
				<span>#游戏</span>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	name: "ChatBodyLeft",
	components: {},
	props: {},
	data() {
		return {};
	},
	created() {},
	mounted() {},
	update() {},
	methods: {},
	filter: {},
	computed: {},
	watch: {}
};
</script>

<style scoped lang="less">
.body-container-left {
	width: 77%;
	&-content {
		// width: 1054px;
		width: 80%;
		margin: 0 auto;
		height: 100%;
		.header-operate {
			display: flex;
			justify-content: space-between;
			align-content: center;
			height: 83px;
			line-height: 83px;

			.info {
				width: 149px;
				height: 43px;
				color: #fff;
				.img {
					width: 43px;
					height: 43px;
					vertical-align: middle;
				}
				.name {
					font-size: 12px;
					margin: 0 10px;
				}
				.logo {
					background-color: #ff005e;
					padding: 3px;
					font-size: 12px;

					border-radius: 10px;
				}
			}

			.operate {
				.el-button {
					width: 108px;
					height: 43px;
					background-color: #2529d8;
					border: 1px solid #2529d8;
					color: #fff;
				}
			}
		}
		.audio {
			width: 100%;
			height: 65%;
		}
		.footer {
			margin-top: 36px;
			color: #fff;
			display: flex;
			justify-content: space-between;
			&-right {
				img {
					vertical-align: middle;
				}
				width: 100px;
				height: 24px;
				font-size: 15px;
			}
		}
		.tags {
			margin-top: 11px;
			padding-bottom: 30px;
			span {
				padding: 5px 16px;
				color: #fff;
				margin-right: 10px;
			}
			span:nth-child(1) {
				background-color: #02d290;
			}
			span:nth-child(2) {
				background-color: #371777;
			}
			span:nth-child(3) {
				background-color: #2529d8;
			}
		}
	}
}
</style>
